import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { NavBar, SearchBar, Tag, List, Empty } from 'antd-mobile';
import { ArrowsAltOutline, FileOutline, LockOutline } from 'antd-mobile-icons';
import './SearchPage.scss';

interface SearchResult {
  id: number;
  title: string;
  description: string;
  type: 'disease' | 'symptom' | 'medicine';
  hot?: boolean;
}

interface HotSearch {
  id: number;
  keyword: string;
  count: number;
}

const SearchPage: React.FC = () => {
  const navigate = useNavigate();
  const [searchValue, setSearchValue] = useState('');
  const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
  const [isSearching, setIsSearching] = useState(false);
  const [searchHistory, setSearchHistory] = useState<string[]>([]);

  const handleBack = () => {
    navigate('/');
  };

  // 热门搜索数据
  const hotSearches: HotSearch[] = [
    { id: 1, keyword: '感冒', count: 12580 },
    { id: 2, keyword: '发烧', count: 9876 },
    { id: 3, keyword: '头痛', count: 7654 },
    { id: 4, keyword: '咳嗽', count: 6543 },
    { id: 5, keyword: '胃痛', count: 5432 },
    { id: 6, keyword: '失眠', count: 4321 },
    { id: 7, keyword: '高血压', count: 3456 },
    { id: 8, keyword: '糖尿病', count: 2345 },
  ];

  // 模拟搜索结果
  const mockSearchResults: SearchResult[] = [
    {
      id: 1,
      title: '感冒',
      description: '感冒是一种常见的上呼吸道感染疾病，主要表现为鼻塞、流涕、咳嗽等症状',
      type: 'disease',
      hot: true
    },
    {
      id: 2,
      title: '感冒药',
      description: '用于缓解感冒症状的药物，包括解热镇痛药、抗组胺药等',
      type: 'medicine'
    },
    {
      id: 3,
      title: '鼻塞',
      description: '感冒的常见症状之一，表现为鼻腔通气不畅',
      type: 'symptom'
    }
  ];

  // 处理搜索
  const handleSearch = (value: string) => {
    if (!value.trim()) return;
    
    setSearchValue(value);
    setIsSearching(true);
    
    // 模拟搜索延迟
    setTimeout(() => {
      setSearchResults(mockSearchResults);
      setIsSearching(false);
      
      // 添加到搜索历史
      if (!searchHistory.includes(value)) {
        setSearchHistory(prev => [value, ...prev.slice(0, 9)]);
      }
    }, 500);
  };

  // 处理热门搜索点击
  const handleHotSearchClick = (keyword: string) => {
    setSearchValue(keyword);
    handleSearch(keyword);
  };

  // 处理搜索历史点击
  const handleHistoryClick = (keyword: string) => {
    setSearchValue(keyword);
    handleSearch(keyword);
  };

  // 清空搜索历史
  const clearHistory = () => {
    setSearchHistory([]);
  };

  // 获取类型标签颜色
  const getTypeColor = (type: string) => {
    switch (type) {
      case 'disease': return '#ff4d4f';
      case 'symptom': return '#faad14';
      case 'medicine': return '#52c41a';
      default: return '#1890ff';
    }
  };

  // 获取类型标签文字
  const getTypeText = (type: string) => {
    switch (type) {
      case 'disease': return '疾病';
      case 'symptom': return '症状';
      case 'medicine': return '药品';
      default: return '其他';
    }
  };

  return (
    <div className="search-page">
      <NavBar 
        className="search-header"
        onBack={handleBack}
        backArrow={<ArrowsAltOutline />}
      >
        搜索
      </NavBar>
      
      <div className="search-content">
        {/* 搜索框 */}
        <div className="search-input-section">
          <SearchBar
            value={searchValue}
            onChange={setSearchValue}
            onSearch={handleSearch}
            placeholder="请输入症状/疾病/药品名称"
            showCancelButton
            className="search-input"
          />
        </div>

        {/* 搜索内容区域 */}
        {!isSearching && searchResults.length === 0 && (
          <div className="search-default-content">
            {/* 热门搜索 */}
            <div className="hot-search-section">
              <div className="section-header">
                <FileOutline className="section-icon" />
                <span className="section-title">热门搜索</span>
              </div>
              <div className="hot-search-tags">
                {hotSearches.map(item => (
                  <Tag
                    key={item.id}
                    className="hot-search-tag"
                    onClick={() => handleHotSearchClick(item.keyword)}
                  >
                    {item.keyword}
                    <span className="search-count">({item.count})</span>
                  </Tag>
                ))}
              </div>
            </div>

            {/* 搜索历史 */}
            {searchHistory.length > 0 && (
              <div className="search-history-section">
                <div className="section-header">
                  <LockOutline className="section-icon" />
                  <span className="section-title">搜索历史</span>
                  <button className="clear-history-btn" onClick={clearHistory}>
                    清空
                  </button>
                </div>
                <div className="history-tags">
                  {searchHistory.map((keyword, index) => (
                    <Tag
                      key={index}
                      className="history-tag"
                      onClick={() => handleHistoryClick(keyword)}
                    >
                      {keyword}
                    </Tag>
                  ))}
                </div>
              </div>
            )}
          </div>
        )}

        {/* 搜索结果 */}
        {isSearching && (
          <div className="search-loading">
            <div className="loading-spinner"></div>
            <p>搜索中...</p>
          </div>
        )}

        {!isSearching && searchResults.length > 0 && (
          <div className="search-results">
            <div className="results-header">
              <span className="results-count">找到 {searchResults.length} 个相关结果</span>
            </div>
            <List className="results-list">
              {searchResults.map(item => (
                <List.Item
                  key={item.id}
                  className="result-item"
                  onClick={() => console.log('点击结果:', item.title)}
                >
                  <div className="result-content">
                    <div className="result-header">
                      <h3 className="result-title">
                        {item.title}
                        {item.hot && <span className="hot-badge">🔥</span>}
                      </h3>
                      <Tag
                        color={getTypeColor(item.type)}
                        className="type-tag"
                      >
                        {getTypeText(item.type)}
                      </Tag>
                    </div>
                    <p className="result-description">{item.description}</p>
                  </div>
                </List.Item>
              ))}
            </List>
          </div>
        )}

        {/* 无搜索结果 */}
        {!isSearching && searchValue && searchResults.length === 0 && (
          <Empty
            className="no-results"
            description="暂无相关结果"
            image={<div className="empty-icon">🔍</div>}
          />
        )}
      </div>
    </div>
  );
};

export default SearchPage;
